<template>
  <div class="app-all-order">
    <FilterForm @searchTable="getOrderTable" />
    <AllOrderTable :table-res="orderTableRes" @getTable="getOrderTable" />
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, provide, toRefs } from 'vue'
import { getOrderTableData } from '@/api/order/order'
import { filterParams } from '@/utils/formMethod'
import { filterKeys } from './components/tableConfig'
import FilterForm from './components/FilterForm.vue'
import AllOrderTable from './components/AllOrderTable.vue'

export default defineComponent({
  components: {
    FilterForm,
    AllOrderTable,
  },
  setup() {
    const state = reactive({
      orderParams: {
        rightProtectionStatus: 0,
        type: 0,
        deliveryMethod: 0,
        payMethod: 0,
        payStarredStatus: 1,
        current: 1,
        size: 5,
      },
      orderTableRes: {},
    })
    // 因为select选项0值不存在，所以筛选参数，删除属性
    const getOrderTable = async () => {
      try {
        const params = filterParams(filterKeys, state.orderParams)
        const data = await getOrderTableData(params)
        state.orderTableRes = data
      } catch (err) {
        throw err
      }
    }
    provide('orderParams', state.orderParams)
    return {
      ...toRefs(state),
      getOrderTable,
    }
  },
})
</script>

<style lang="scss" scoped>
.app-all-order {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 15px;
}
</style>
